<template>
  <a-layout>
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%', background: '#fff', display: 'flex', }">
      <a-space class="header_routers">
        <router-link to="/home">{{ $t("nav.archive") }}</router-link>
        <router-link to="/archives">{{ $t("nav.classify") }}</router-link>
        <router-link to="/knowledge">{{ $t("nav.knowledge") }}</router-link>
        <router-link :to="'/pages/' + item.path" v-for="(item, ind) in pagerouter" :key="ind">
          {{ item.name }}
        </router-link>
      </a-space>
      <a-space class="headet_texts">
        <a href="javascript:;" @click="() => i18ntozh()" v-if="locale != 'zh'">{{ $t("nav.chi") }}</a>
        <a href="javascript:;" @click="() => i18ntoen()" v-else>{{ $t("nav.eng") }}</a>
        <a href="javascript:;"> <a-switch v-model:checked="isDarkThem" @change="changeThem" />切换主题颜色</a>
        <a href="javascript:;" @click="handelsearchs">搜索</a>
      </a-space>
      <a-space class="header_icons">
        <div class="header_icon" @click="iconsChange">
          <div class="header_icon_one" @click="parentIcons"></div>
          <div class="header_icon_two" @click="parentIcons"></div>
          <div class="header_icon_three" @click="parentIcons"></div>
        </div>
      </a-space>
    </a-layout-header>

    <a-layout-content :style="{ padding: '15px', marginTop: '80px' }">
      <div :style="{ background: '#fff' }">
        <router-view></router-view>
      </div>
    </a-layout-content>
  </a-layout>


  <a-drawer placement="top" :closable="false" :visible="visible" @close="onClose">
    <div><router-link to="/home">{{ $t("nav.archive") }}</router-link></div>
    <div><router-link to="/archives">{{ $t("nav.classify") }}</router-link></div>
    <div> <router-link to="/knowledge">{{ $t("nav.knowledge") }}</router-link></div>
    <div v-for="(item, ind) in pagerouter" :key="ind">
      <router-link :to="'/pages/' + item.path">
        {{ item.name }}
      </router-link>
    </div>
    <div v-if="locale != 'zh'"> <a href="javascript:;" @click="() => i18ntozh()">{{ $t("nav.chi") }}</a></div>
    <div v-else> <a href="javascript:;" @click="() => i18ntoen()">{{ $t("nav.eng") }}</a></div>
    <div> <a href="javascript:;"> <a-switch v-model:checked="isDarkThem" @change="changeThem" />切换主题颜色</a></div>
    <div><a href="javascript:;" @click="handelsearchs">搜索</a></div>
  </a-drawer>

  <component :is="Searchs" :isshow="isshow" @handelisshow="handelisshow"></component>
</template>

<script setup lang="ts">
import Searchs from "../components/searchs.vue"
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useDefault } from "../store/default"
//切换主题
import { useThem } from '../hooks/changeColor'
//i18n
import { useI18n } from "vue-i18n";

const { locale } = useI18n(); // vue-i18n提供了一个钩子函数 useI18n(),暴露出locale属性用于切换语言
locale.value = "zh"; // 要切换的语言


//切换搜索输入
let isshow = ref(false);
let handelsearchs = () =>{
  isshow.value = !isshow.value
}
const handelisshow = (val:any) =>{
  console.log(val,"val")
  isshow.value = val
}

let i18ntozh = () => {
  locale.value = "zh"
}
let i18ntoen = () => {
  locale.value = "en"
}

//切换主题颜色
const { isDarkThem, changeThem } = useThem();

const defaults = useDefault();
const { pagerouter } = storeToRefs(defaults)
defaults.getpages()
//抽屉开关
const visible = ref<boolean>(false);
//点击显示抽屉
const showDrawer = () => {
  visible.value = true;
};
//点击关闭抽屉
const onClose = () => {
  visible.value = false;
};
//点击icon父元素
let iconsChange = (e: any) => {
  //判断点击的是否是父元素节点
  if (e.target.className.includes('header_icon')) {
    //判断有没有被点击过
    if (e.target.className.includes("header_icon_change")) {
      //点击过之后
      e.target.classList.remove("header_icon_change")
      //关闭抽屉
      onClose()
    } else {
      //未点击过
      e.target.classList.add("header_icon_change")
      //打开抽屉
      showDrawer()
    }
  }
}
//点击icon子元素
let parentIcons = (e: any) => {
  // console.log(e.target.parentElement,"夫")
  e.stopPropagation();
  if (e.target.parentElement.className.includes("header_icon_change")) {
    //点击过之后
    e.target.parentElement.classList.remove("header_icon_change")
    //关闭抽屉
    onClose()
  } else {
    //未点击过
    e.target.parentElement.classList.add("header_icon_change")
    //打开抽屉
    showDrawer()
  }
}

</script>

<style lang="scss">
// .boxaaa {
//   background-color: $boxBgColor; // 全局变量
//   width: 200px;
//   height: 200px;
//   margin: 0 auto 20px;
//   line-height: 200px;
//   text-align: center;

//   span {
//     color: $fontColor;  // 全局变量
//   }
// }
.ant-layout-header {
  justify-content: space-between;

  .ant-space-item {
    padding: 0 15px;
  }
}

a {
  font-weight: bold;
  font-size: 18px;
  font-family: "华文行楷";
  color: #000;
}

a:hover {
  color: pink;
}

.router-link-active {
  color: pink;
}

.header_icon {
  width: 50px;
  height: 50px;
  // border: 1px solid #000;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  cursor: pointer;

  .header_icon_one,
  .header_icon_two,
  .header_icon_three {
    width: 80%;
    height: 6px;
    background: #f90;
    border-radius: 3px;
  }
}

.ant-layout,
.ant-layout-header{
  background-color: $boxBgColor !important;
  color: $fontColor !important;
}
a {
    color: $fontColor !important;
  }
span,h2,h3 {
    color: $fontColor;
  }

  a:hover {
    color: pink !important;
  }

  .router-link-active {
    color: pink !important;
  }
.ant-card{
  background-color: $boxBgColor !important;
  color: $fontColor !important;
}
.home_box{
  background-color: $boxBgColor !important;
}
.ant-card-head-title{
  color: $fontColor !important;
}
.ant-drawer-content{
  background-color: $boxBgColor !important;
  border: 1px solid $fontColor !important;
}
.search_box{
  background-color: $boxBgColor !important;
  color: $fontColor !important;
}
//标题自定义 icon 动画

//切换动画
.header_icon_change {
  & div.header_icon_one {
    animation: headerOne 3s;
    transform: translate(0, 12px) rotateZ(45deg);
  }

  & div.header_icon_three {
    animation: headerThree 3s;
    transform: translate(0, -12.5px) rotateZ(-45deg);
  }

  & div.header_icon_two {
    transition: display 3s;
    display: none;
  }
}

//切换动画
//第一条线动画
@keyframes headerOne {
  0% {
    transform: rotate(0) translate(0, 0);
  }

  100% {
    transform: translate(0, 12px) rotateZ(45deg);
  }
}

//第三条线动画
@keyframes headerThree {
  0% {
    transform: rotate(0) translate(0, 0);
  }

  100% {
    transform: translate(0, -12.5px) rotateZ(-45deg);
  }
}
//屏幕小于970px
@media screen and (max-width: 970px) {
  div.header_routers {
    display: none;
  }

  div.headet_texts {
    display: none;
  }

  div.header_icons {
    display: inline-flex;
  }

  div.home_right_boxs {
    display: none;
  }
}

.header_routers {
  display: inline-flex;
}

.headet_texts {
  display: inline-flex;
}

.header_icons {
  display: none;
}

.ant-drawer-open {
  top: 64px;
}

.ant-drawer-content-wrapper {
  height: calc(100vh - 64px);
}
</style>